<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodeS demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
  <script src="static/js/jquery-3.7.1.min.js"></script>
</head>

<body>
  <!-- partial:index.partial.html -->
  <section class="msger">
    <header class="msger-header">
      <div class="msger-header-title">
        Text-to-SQL demo 
      </div>
    </header>

    <main class="msger-chat">
      <div class="msg left-msg">
        <div class="msg-img" style="background-image: url(static/logo/codes_logo.png)"></div>

        <div class="msg-bubble">
          <div class="msg-info">
            <div class="msg-info-name">CodeS</div>
            <div class="msg-info-time"></div>
          </div>

          <div class="msg-text">
            Welcome to the CodeS demo! <br><br> To begin, select your preferred database from the options available in the box on the right. After making your selection, input your questions in natural language and then CodeS will seamlessly translate your input into a valid SQL query. <br><br> For instance, you can input: "Help me find the three papers with the highest citations authored by 'Zhang Jing' from 'Renmin University of China'."
          </div>
        </div>
      </div>

    </main>
  
    <form class="msger-inputarea">
      <input type="text" class="msger-input" id="textInput" placeholder="Enter your message...">
      <button type="submit" class="msger-send-btn">Send</button>
    </form>
  </section>

  <section class="selector">
    <header class="msger-header">
      <div class="msger-header-title">
        Select a database
      </div>
    </header>
    <select id="dbSelector" class="select-button"></select>
    <div id="ddlText" class="ddl-text"></div>
  </section>

  <!-- partial -->
  <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
  <script>

    const msgerForm = get(".msger-inputarea");
    const msgerInput = get(".msger-input");
    const msgerChat = get(".msger-chat");

    const BOT_IMG = "static/logo/codes_logo.png";
    const PERSON_IMG = "static/logo/user_logo.png";
    const BOT_NAME = "CodeS";
    const PERSON_NAME = "You";

    function updateDDL(db){
      $.get("/get_db_ddl", {db_id: db}).done(function (data) {
        document.getElementById('ddlText').innerText = data
      });
    }

    $.get("/get_db_ids").done(function (data) {
        const selectElement = document.getElementById('dbSelector');
        data.forEach(db_id => {
            const optionElement = document.createElement('option');
            optionElement.value = db_id;
            optionElement.textContent = db_id;
            selectElement.appendChild(optionElement);
        });
        // console.log(data);
        updateDDL(data[0]);
    });
    
    document.getElementById('dbSelector').addEventListener('change', function() {
      updateDDL(this.value);
    });

    msgerForm.addEventListener("submit", event => {
      event.preventDefault();

      const msgText = msgerInput.value;
      const db =  document.getElementById("dbSelector").value
      if (!msgText) return;

      appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
      msgerInput.value = "";
      botResponse(msgText, db);
    });

    function appendMessage(name, img, side, text) {
      //   Simple solution for small apps
      const msgHTML = `
<div class="msg ${side}-msg">
  <div class="msg-img" style="background-image: url(${img})"></div>

  <div class="msg-bubble">
    <div class="msg-info">
      <div class="msg-info-name">${name}</div>
      <div class="msg-info-time">${formatDate(new Date())}</div>
    </div>

    <div class="msg-text">${text}</div>
  </div>
</div>
`;

      msgerChat.insertAdjacentHTML("beforeend", msgHTML);
      msgerChat.scrollTop += 500;
    }

    function botResponse(rawText, db) {

      // Bot Response
      $.get("/get", { msg: rawText, db_id: db }).done(function (data) {
        console.log(rawText);
        console.log(data);
        const msgText = data;
        appendMessage(BOT_NAME, BOT_IMG, "left", msgText);

      });

    }

    // Utils
    function get(selector, root = document) {
      return root.querySelector(selector);
    }

    function formatDate(date) {
      const h = "0" + date.getHours();
      const m = "0" + date.getMinutes();

      return `${h.slice(-2)}:${m.slice(-2)}`;
    }
  </script>

</body>

</html>